<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 450px;
            height: 300px;
            border: 1px solid #000;
            margin: 150px auto;
            /* 透视 */
            perspective: 1000px;
        }
        .box img{
            /* transition: all 1s ease; */
            transform: rotateY(60deg) translateX(100px);
        }
        .box img:hover {
            /* transform: rotateX(60deg); */
            /* transform: rotateY(60deg); */
            /* transform: rotateZ(60deg); */

            /* transform: translateX(100px); */
            /* transform: translateY(100px); */
            /* transform: translateZ(100px); */

            /* 旋转和位移可以同时赋值 但是顺序不同效果呈现不一样 */


        }
    </style>
</head>
<body>
    <!-- 3d转换 -->
    <!-- 
        透视
        近大远小 1000像素以上
        perspective: 1000px;
        rotateX(angle)  正顺时针 负逆时针 站在轴的正方向 面对负方向的顺时针
        rotateY(angle)
        rotateZ(angle)

        位移
        translateX()
        translateY()
        translateZ()
        
    -->

    <div class="box">
        <img src="../image/trans/1.jpg">
    </div>
</body>
</html>